<template>
	<view class="tn-stack-swiper-class tn-stack-swiper" :style="{
      width: $t.string.getLengthUnitValue(width),
      height: $t.string.getLengthUnitValue(height)
    }" :list="swiperList" :itemData="itemData" :currentIndex="swiperIndex" :autoplayFlag="autoplayFlag"
		:change:list="wxs.listObserver" :change:itemData="wxs.itemDataObserver"
		:change:currentIndex="wxs.swiperIndexChange" :change:autoplayFlag="wxs.autoplayFlagChange">
		<block v-for="(item, index) in list" :key="index">
			<!-- #ifdef MP-WEIXIN -->
			<view  @click="clickImage(item)" class="tn-stack-swiper__item tn-stack-swiper__item__transition"
				:class="[`tn-stack-swiper__item--${direction}`]" :data-index="index" :data-switchRate="switchRate"
				@touchstart="wxs.touchStart" :catch:touchmove="touching?wxs.touchMove:''"
				:catch:touchend="touching?wxs.touchEnd:''">
				<image class="tn-stack-swiper__image" :src="item.image"></image>
			</view>
			<!-- #endif -->

			<!-- #ifndef MP-WEIXIN -->
			<view @click="clickImage(item)" class="tn-stack-swiper__item" :class="[`tn-stack-swiper__item--${direction}`]" :data-index="index"
				:data-switchRate="switchRate" @touchstart="wxs.touchStart" @touchmove="wxs.touchMove"
				@touchend="wxs.touchEnd">
				<image class="tn-stack-swiper__image" :src="item.image"></image>
			</view>
			<!-- #endif -->
		</block>
	</view>
</template>

<!-- #ifdef MP-WEIXIN -->
<script src="./index.wxs" lang="wxs" module="wxs"></script>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<script src="./index-h5.wxs" lang="wxs" module="wxs"></script>
<!-- #endif -->
<script>
	export default {
		name: 'tn-stack-swiper',
		props: {
			// 显示图片的列表数据
			// {
			//   // 图片地址
			//   image: 'xxx'
			// }
			list: {
				type: Array,
				default () {
					return []
				}
			},
			// 轮播容器的宽度 rpx
			width: {
				type: [String, Number],
				default: '100%'
			},
			// 轮播容器的高度 rpx
			height: {
				type: [String, Number],
				default: 500
			},
			// 自动切换
			autoplay: {
				type: Boolean,
				default: false
			},
			// 自动切换时长 ms
			interval: {
				type: Number,
				default: 5000
			},
			// 滑动切换移动比例, [0 - 100]
			// 比例相对于item的宽度
			switchRate: {
				type: Number,
				default: 30
			},
			// 缩放比例 [0-1]
			scaleRate: {
				type: Number,
				default: 0.1
			},
			// 下一轮播偏移比例
			translateRate: {
				type: Number,
				default: 16
			},
			// 下一轮播透明比例
			opacityRate: {
				type: Number,
				default: 10
			},
			// 滑动方向
			// horizontal -> 水平 vertical -> 垂直
			direction: {
				type: String,
				default: 'horizontal'
			}
		},
		data() {
			return {
				autoplayTimer: null,
				// window窗口的宽度
				windowWidth: 0,
				// 轮播item的宽度
				swiperItemWidth: 0,
				// 轮播item的高度
				swiperItemHeight: 0,
				// 当前选中的轮播item
				swiperIndex: -1,
				// 标记是否开始触摸
				touching: true,
				// 轮播列表信息
				swiperList: [],
				// 标记当前是否为自动播放
				autoplayFlag: false
			}
		},
		computed: {
			itemData() {
				return {
					windowWidth: this.windowWidth,
					itemWidth: this.swiperItemWidth,
					itemHeight: this.swiperItemHeight,
					direction: this.direction,
					autoplaying: this.autoplayFlag
				}
			}
		},
		watch: {
			list(val) {
				this.swiperList = []
				this.$nextTick(() => {
					this.initSwiperRectInfo()
				})
			},
			autoplay(val) {
				if (!val) {
					this.clearAutoPlayTimer()
				} else {
					this.setAutoPlay()
				}
			}
		},
		created() {
			this.autoplayFlag = this.autoplay
		},
		mounted() {
			this.$nextTick(() => {
				this.initSwiperRectInfo()
			})
		},
		destroyed() {
			this.clearAutoPlayTimer()
		},
		methods: {
			clickImage(item) {
				this.$emit('clickCall',item)
			},
			// 初始化轮播容器信息
			async initSwiperRectInfo() {
				// 用于一开始绑定事件
				// this.touching = true
				// 获取轮播item的宽度
				const swiperItemRect = await this._tGetRect('.tn-stack-swiper__item')
				if (!swiperItemRect || !swiperItemRect.width || !swiperItemRect.height) {
					setTimeout(() => {
						this.initSwiperRectInfo()
					}, 50)
					return
				}
				this.swiperItemWidth = swiperItemRect.width
				this.swiperItemHeight = swiperItemRect.height
				// this.touching = false

				// 获取系统的窗口宽度信息
				const systemInfo = uni.getSystemInfoSync()
				this.windowWidth = systemInfo.windowWidth
				this.swiperIndex = 0

				// 设置对应swiper元素的位置和层级信息
				this.swiperList = this.list.map((item, index) => {

					const scale = 1 - (this.scaleRate * index)

					if (this.direction === 'horizontal') {
						item.translateX = ((index * this.translateRate) * 0.01 * this.swiperItemWidth)
					} else if (this.direction === 'vertical') {
						item.translateY = ((index * this.translateRate) * 0.01 * this.swiperItemHeight)
					}
					item.opacity = (1 - ((index * this.opacityRate) * 0.01))
					item.zIndex = this.list.length - index
					item.scale = scale <= 0 ? 0 : scale

					return item
				})

				this.setAutoPlay()
			},
			// 设置自动切换轮播
			setAutoPlay() {
				if (this.autoplay) {
					this.clearAutoPlayTimer()
					this.autoplayFlag = true
					this.autoplayTimer = setInterval(() => {
						this.swiperIndex = this.swiperIndex + 1 > this.swiperList.length - 1 ? 0 : this
							.swiperIndex + 1
					}, this.interval)
				}
			},
			// 清除自动切换定时器
			clearAutoPlayTimer() {
				if (this.autoplayTimer != null) {
					this.autoplayFlag = false
					clearInterval(this.autoplayTimer)
				}
			},
			// 修改轮播选中index
			changeSwiperIndex(e) {
				// console.log(e.index);
				this.swiperIndex = e.index
				this.$emit('change', {
					index: e.index
				})
			},
			// 修改触摸状态
			changeTouchState(e) {
				this.touching = e.touching
			},
			// 打印日志
			printLog(data) {
				console.log("log", data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-stack-swiper {
		position: relative;

		&__item {
			position: absolute;
			border-radius: 20rpx;
			overflow: hidden;

			&--horizontal {
				width: 88%;
				height: 100%;
				transform-origin: left center;
			}

			&--vertical {
				width: 100%;
				height: 88%;
				transform-origin: top center;
			}

			&__transition {
				transition-property: transform, opacity;
				transition-duration: 0.25s;
				transition-timing-function: ease-out;
				// transition: transform, opacity 0.25s ease-in-out !important;
			}
		}

		&__image {
			width: 100%;
			height: 100%;
		}
	}
</style>